<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Java文档搜索</title>
</head>
<body>

  
 <!-- 通过 .container 来表示整个页面元素的容器 -->
   
    <div class="container">
        <!-- 1、搜索框+搜索按钮 -->
        <div class="header">
            <input type="text">
            <button id="search-btn">搜索</button>
        </div>

        <!-- 2、显示搜索结果 -->
        <div class="result">
             <!-- 包含了很多条记录 -->
            <!-- 每个.item 表示一条记录 -->


            <h1 style="text-align: center;">欢迎使用Java文档搜索引擎</h1>
<!--            <div class="item">-->
<!--                <a href="#">这是标题</a>-->
<!--                <div class="desc">这是一段描述aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>-->
<!--                <div class="url">http://www.baidu.com</div>-->
<!--            </div>-->


        </div>
    </div>


    <style>
        /* 去掉浏览器的默认样式 */
        *{
            margin:0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 给整体的页面指定一个高度（和浏览器的高度一样高） */
        html,body{
            height: 100%;
            background-image: url(image/aa.jpg);
            /*设置背景图是否品购*/
            background-repeat:no-repeat;
            /*设置背景图的位置*/
            background-position: center center;
            /*设置背景图的大小*/
            background-size:cover ;
        }

        /*针对.container 设置样式，实现版心效果*/
        .container{
            height: 100%;
            width: 1200px;
            /*设置水平居中*/
            margin: 0 auto;
            /*    设置背景色*/
            background-color: rgba(255,255,255,0.8);
            /*    设置圆角矩形*/
            border-radius: 10px;
            /* 设置内边距，避免文字内容紧贴内边距*/
            padding: 30px;
        /*    超出元素的部分自动生成一个滚动条*/
            overflow: auto;
        }

        .header{
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;

        }

        .header>input{
            width: 1000px;
            height: 50px;
            font-size: 22px;
            line-height: 50px;
            padding-left: 10px;
            border-radius: 10px;
        }

        .header>button{
            width: 120px;
            height: 50px;
            background-color: blue;
            color: #fff;
            font-size: 22px;
            line-height: 50px;
            border:none;
            border-radius: 10px;
        }

        .header>button:active{
            background: plum;
        }

        .result .count{
            color: gray;
            margin-top: 20px;
        }

        .item {
            width: 100%;
            margin-top: 22px;
        }

        .item .desc i{
            color: red;
            font-style: normal;
        }

        .item a{
            display: block;
            height: 40px;
            font-size: 25px;
            line-height: 40px;
            font-weight: 700;
        }

        .item .desc{
            font-size: 18px;
        }

        .item .url{
            font-size: 15px;
            color: rgb(0, 128, 43);
        }

        
    </style>



 <script src="js/jquery.min.js"></script>


<!-- 放置用户自己写的 js代码-->
<script>

// 监听按钮的点击事件

    let button = document.querySelector("#search-btn");
    button.onclick = function(){
        // 先获取到输入框的内容
        let input = document.querySelector(".header input");
        let query = input.value;
        console.log(query);

        // 构造一个ajax请求给 服务器
        $.ajax({
            url:"searcher?query="+query,
            type:"GET",
            success:function (data,status) {
                if(data.length===0){
                    alert("没有相关内容!")
                    return;
                }
                console.log(data);
                // 这个函数会在请求成功后调用，data表示拿到的成功结果数据，statuc是返回的HTTP响应码
                buildResult(data);
            }
        })

        function buildResult(data){

            let resultDiv = document.querySelector(".result");
            // 每次查询之前清空上次结果
            resultDiv.innerHTML='';

            // 先构造一个div显示结果的个数
            let countDiv = document.createElement("div");
            countDiv.className="count";
            countDiv.innerHTML="当前找到 "+data.length +"个结果 ";
            resultDiv.appendChild(countDiv);

            // 根据收到的结果构造页面内容
            for(let result of data){
                // 针对每一个result创建一个 div.ietm，把标题url构造好
                // 这些操作都是基于 DOM API 来构建的

                let itemDiv = document.createElement('div');
                itemDiv.className='item';

                let title = document.createElement('a');
                title.innerHTML=result.title;
                title.target="_blank";
                title.href=result.url;
                itemDiv.appendChild(title);

                let desc = document.createElement('div');
                desc.className='desc';
                desc.innerHTML=result.desc;
                itemDiv.appendChild(desc);

                let url = document.createElement("div");
                url.className='url';
                url.innerHTML=result.url;
                itemDiv.appendChild(url);

                resultDiv.appendChild(itemDiv);

            }


        }
    }

</script>



</body>
</html>